<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>任务二：零基础HTML及CSS编码（一）</title>
    <link rel="stylesheet" href="ife-wei-02.css">
  </head>
  <body>
    <div class="navbar">
      <img src="logo.png" id="navlogo">
      <ul id="navlist">
        <li><a href="#article1">导航链接一</a></li>
        <li><a href="#article2">导航链接二</a></li>
        <li><a href="#article3">导航链接三</a></li>
        <li><a href="#article4">导航链接四</a></li>
      </ul>
    </div>

    <div class="container">
      <div class="card">
        <h1 id="article1">文章一级标题</h1>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
        <img src="keyboard.jpg">
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
      </div>

      <div class="card">
        <h1 id="article2">另一篇文章一级标题</h1>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
        <img src="keyboard.jpg">
        <ul>
          <li>列表项目一</li>
          <li>列表项目二</li>
          <li>列表项目三</li>
        </ul>
      </div>

      <div class="card">
        <h1 id="article3">图片</h1>
        <ul id="picset">
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
          <li><p>好看的图片</p><img src="keyboard.jpg"></li>
        </ul>
      </div>

      <div class="card">
        <h1 id="article4">最后一篇文章一级标题</h1>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <ol>
          <li>排名1</li>
          <li>排名2</li>
          <li>排名3</li>
        </ol>
        <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
        <table>
          <thead>
            <tr>
              <th>表头</th>
              <th>表头</th>
              <th>表头</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td>操作</td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td>操作</td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td>操作</td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td>操作</td>
            </tr>
            <tr id="lastrow">
              <td>总计</td>
              <td colspan="2">1000</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="card">
        <h1 class="side-bar">这里以后是一个侧栏，这是侧栏的标题</h1>
        <h2 class="side-bar-title">个人信息注册</h2>
        <form id="info" action="ife-wei-02.html" method="get">
          <div class="line">
            <label class="desc" for="email-address">请输入邮箱地址：</label>
            <input type="email" id="email-address" placeholder="这是一个输入文本框">
          </div>
          <div class="side-hint">
            <span class="desc"></span>
            <span>邮箱地址请按要求格式输入</span>
          </div>
          <div class="line">
            <label class="desc" for="pwd1">请输入密码：</label>
            <input type="password" id="pwd1" placeholder="这是一个输入文本框"></p>
          </div>
          <div class="line">
            <label class="desc" for="pwd2">请重复输入密码：</label>
            <input type="password" id="pwd2" placeholder="这是一个输入文本框"></p>
          </div>
          <div class="side-hint">
            <span class="desc"></span>
            <span>密码请为6-16位英文数字</span>
          </div>
          <div class="line">
            <label class="desc">性别：</label>
            <input type="radio" name="sex" id="male"><label for="male">男</label><input type="radio" name="sex" id="female"><label for="female">女</label>
          </div>
          <div class="line">
            <label class="desc">城市：</label>
            <select name="city" id="city"><option value="beijing" selected>北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option></select>
          </div>
          <div class="line">
            <label class="desc">爱好：</label>
            <input type="checkbox" name="hobby" id="sport"><label for="sport">运动</label><input type="checkbox" name="hobby" id="art"><label for="art">艺术</label><input type="checkbox" name="hobby" id="science"><label for="science">科学</label>
          </div>
          <div class="line">
            <label class="desc">个人描述：</label>
            <textarea name="description" id="description" cols="50" rows="5" placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
          </div>
          <input type="submit" value="确认提交" id="submit1"></p>
        </form>
      </div>
    </div>
    <div class="footer">
      <p>版权所有©</p>
    </div>
  </body>
</html>
